<template>
  <div>
      <!-- 顶部表单 -->
      <el-card class="box-card">
      <el-row>
          <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                  <el-form :inline="true" :model="formInlinecx" class="demo-form-inline">
                      <el-form-item label="货品类型">
                          <el-input v-model="formInlinecx.item_type_name" placeholder="请输入"></el-input>
                      </el-form-item>
                      <el-form-item label="状态">
                          <el-select v-model="formInlinecx.inbill_state" placeholder="请选择">
                              <el-option label="启用" value="1"></el-option>
                              <el-option label="停用" value="0"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="操作人">
                          <el-select v-model="formInlinecx.create_by" placeholder="请选择">
                            <el-option label="admin" value="admin"></el-option>
                          </el-select>
                      </el-form-item>
                      <el-form-item label="操作时间">
                          <div class="block">
                              <el-date-picker v-model="formInlinecx.create_time" type="date" placeholder="选择日期">
                              </el-date-picker>
                          </div>
                      </el-form-item>
                      <el-form-item>
                          <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                              @click="cz()">重置</el-button>
                          <el-button class="custom-button" @click="fill()">查询</el-button>
                      </el-form-item>
                  </el-form>
              </div>
          </el-col>
        </el-row>
    </el-card>
      <el-row>
          <el-col :span="8">
              <div class="grid-content bg-purple">
                  <div style="margin-bottom: 10px;">
                      <el-button class="custom-button" @mouseover="hover = true" @mouseout="hover = false"
                          @click="drawer = true">新增</el-button>
                      <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                          @click="onSubmit">导出</el-button>
                      <el-button class="custom-button2" @click="onSubmit">导入</el-button>
                  </div>
              </div>
          </el-col>
      </el-row>
      <!-- 数据表格与按钮 -->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border style="width: 1500px"
          @selection-change="handleSelectionChange">
          <!-- 左边固定 -->
          <el-table-column fixed type="selection" width="55">
          </el-table-column>
          <el-table-column fixed prop="id" label="编号" width="150" align="center">
          </el-table-column>
          <el-table-column fixed prop="item_type_code" label="货品编号" width="150" align="center">
          </el-table-column>
          <el-table-column fixed prop="item_type_name" label="货物名称" width="150" align="center">
          </el-table-column>
          <el-table-column fixed prop="sort_code" label="排序" width="150" align="center">
          </el-table-column>
          <el-table-column fixed prop="inbill_state" label="状态" width="150" align="center">
              <template slot-scope="scope">
                  <el-tag type="danger" effect="dark" v-if="scope.row.inbill_state == 0">停用
                  </el-tag>
                  <el-tag type="primary" effect="dark" v-if="scope.row.inbill_state == 1">启用
                  </el-tag>
              </template>
          </el-table-column>
          <el-table-column fixed prop="remark" label="备注" width="200" align="center">
          </el-table-column>
          <el-table-column fixed prop="create_by" label="操作人" width="150" align="center">
          </el-table-column>
          <el-table-column fixed prop="create_time" label="操作时间" width="200" align="center">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="110px" align="center">
              <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button @click="Delect(scope.row)" type="text" size="small">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
      <!-- 新增 -->
      <el-drawer title="新增" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
          <el-form :inline="true" :model="formInline" class="demo-form-inline2" :label-position="labelPosition">
              <el-form-item label="上级分类" class="Selected">
                  <el-input  v-model="formInline.father_code" placeholder="请输入" class="SInput"></el-input >
              </el-form-item>
              <el-form-item label="货品类型编号" class="Selected">
                  <el-input v-model="formInline.item_type_code" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <el-form-item label="货品类型名称" class="Selected">
                  <el-input v-model="formInline.item_type_name" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <el-form-item label="排序" class="Selected">
                  <el-input v-model="formInline.sort_code" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="状态" class="Selected">
                  <template>
                      <el-radio v-model="formInline.inbill_state" label="1" value="1">启用</el-radio>
                      <el-radio v-model="formInline.inbill_state" label="0" value="0">停用</el-radio>
                  </template>
              </el-form-item>
              <br>
              <el-form-item label="备注" class="Selected">
                  <el-input v-model="formInline.remark" type="textarea" :rows="2" placeholder="请输入内容" width="600px">
                  </el-input>
              </el-form-item>
              <br>
              <el-form-item>
                  <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false" @click="onSubmit"
                      style=" background-color: #79828a;color: #FFF;">取消</el-button>
                  <el-button class="custom-button" @click="bc()">保存</el-button>
              </el-form-item>
          </el-form>
      </el-drawer>
      <!-- 修改 -->
      <el-drawer title="修改" :visible.sync="drawerxg" :direction="direction" :before-close="handleClose">
          <el-form :inline="true" :model="formInline" class="demo-form-inline2" :label-position="labelPosition">
              <el-form-item label="上级分类" class="Selected">
                  <el-input v-model="formInline.father_code" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <el-form-item label="货品类型编号" class="Selected">
                  <el-input v-model="formInline.item_type_code" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <el-form-item label="货品类型名称" class="Selected">
                  <el-input v-model="formInline.item_type_name" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <el-form-item label="排序" class="Selected">
                  <el-input v-model="formInline.sort_code" placeholder="请输入" class="SInput"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="状态" class="Selected">
                  <template>
                      <el-radio v-model="formInline.inbill_state" label="1" value="1">启用</el-radio>
                      <el-radio v-model="formInline.inbill_state" label="0" value="0">停用</el-radio>
                  </template>
              </el-form-item>
              <br>
              <el-form-item label="备注" class="Selected">
                  <el-input v-model="formInline.remark" type="textarea" :rows="2" placeholder="请输入内容" width="600px">
                  </el-input>
              </el-form-item>
              <br>
              <el-form-item>
                  <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false" @click="onSubmit"
                      style=" background-color: #79828a;color: #FFF;">取消</el-button>
                  <el-button class="custom-button" @click="xg()">保存</el-button>
              </el-form-item>
          </el-form>
      </el-drawer>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="rows">
      </el-pagination>
  </div>
</template>
<script>
import $http from '../http/base.js'
import qs from 'qs'
export default {
  data() {
      return {
          labelPosition: 'right',
          currentPage: 1,
          rows: 1,
          pageSize: 3,
          direction: 'rtl',
          textarea: '',
          radio: '1',
          pickerOptions: {
              disabledDate(time) {
                  return time.getTime() > Date.now();
              },
              shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                      picker.$emit('pick', new Date());
                  }
              }, {
                  text: '昨天',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24);
                      picker.$emit('pick', date);
                  }
              }, {
                  text: '一周前',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', date);
                  }
              }]
          },
          formInline: {
              id: "",
              item_type_code: "",//编号
              item_type_name: "",//名称
              inbill_state: '',//状态
              create_by: "",//操作人
              create_time: "",//操作时间
              father_code: '',
              sort_code: '',
              remark: "",
              update_by: "",
              update_time: "",
              is_del: 0,
          },
          formInlinecx: {
              item_type_code: "",//编号
              item_type_name: "",//名称
              inbill_state: '',//状态
              create_by: "",//操作人
              create_time: "",//操作时间
              remark: "",
              update_by: '',
              update_time: '',
              is_del: 0,
          },
          drawer: false,
          drawerxg: false,
          value1: '',
          value2: '',
          tableData: [],
          multipleSelection: [],
          kssj:"",
          jssj:"",

      }
  },
  mounted() {
      this.fill();
      this.currentPage = 1;
  },
  computed: {
  },
  methods: {
      fill() {   
          $http.post("https://localhost:7020/api/ItemType/bs_Itemtype_FenYe?pageSize=" + 
          this.pageSize + "&currentPage=" + this.currentPage+"&"+qs.stringify(this.formInlinecx))
         .then((res) => {
                  console.log(res.list);
                  this.tableData = res.list;
                  this.rows = res.count;
              }).catch((err) => {
                  alert('错误')
                  console.log(err);
              });
      },
      onSubmit() {//关闭
          this.drawer = false;
      },
      cz() {
          this.formInline.item_type_code = "";
          this.formInline.item_type_name = "";
          this.formInline.inbill_state = "";
          this.formInline.create_by = "";
          this.formInline.create_time = "";
          this.formInlinecx.item_type_name="";
          this.formInlinecx.inbill_state="";
          this.formInlinecx.create_by="";
          this.formInlinecx.create_time="";
          this.formInlinecx.item_type_code="";
      },
      handleClose(done) {//关闭
                  done();
      },
      //表格选择功能
      toggleSelection(rows) {
          if (rows) {
              rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
              });
          } else {
              this.$refs.multipleTable.clearSelection();
          }
      },
      handleSelectionChange(val) {//固定列表
          this.multipleSelection = val;
          console.log(val);
      }, handleClick(row) {//编辑
          console.log(row);
          this.drawerxg = true;
          this.MakeTime();
          $http.get('http://localhost:7020/api/ItemType/ItemTypeSelectid?id=' + row.id)
              .then((res) => {
                  console.log("id查询结果为" + row.id);
                  this.formInline.id = res.id;
                  this.formInline.father_code = res.father_code;
                  this.formInline.item_type_code = res.item_type_code;
                  this.formInline.item_type_name = res.item_type_name;
                  this.formInline.sort_code = res.sort_code;
                  this.formInline.inbill_state = res.inbill_state;
                  this.formInline.remark = res.remark;
                  this.formInline.create_time = res.create_time;
              })
      }, xg() {//修改
          this.MakeTime();
          $http.post('http://localhost:5283/api/ItemType/ItemTypeUpdate', this.formInline
          ).then(res => {
              alert("修改成功")
              this.fill();
              console.log(res)
          })
              .catch(err => {
                  console.log(err);
              })
      },
      handleSizeChange(pageSize) {//分页
          this.pageSize = pageSize;
          this.currentPage = 1;
          console.log(this.pageSize);
          this.fill();
      },
      handleCurrentChange(currentPage) {//分页
          this.currentPage = currentPage;
          console.log(this.currentPage);
          this.fill();
      }, Delect(row) {//逻辑删除is_del=0
          $http.post("https://localhost:7020/api/ItemType/ItemtypeUDelect?item_type_code=" + row.item_type_code)
              .then((res) => {
                  console.log("供应商逻辑删除返回数据:" + res);
                  alert("删除成功！");
                  this.fill();
              })
      }, bc() {//保存
          $http.post("https://localhost:7020/api/ItemType/ItemTypeAdd", this.formInline)
              .then((res) => {
                  alert("新增成功！")
                  this.formInline.father_code = "",
                      this.formInline.item_type_code = "",
                      this.formInline.item_type_name = "",
                      this.formInline.sort_code = "",
                      this.formInline.inbill_state = "",
                      this.formInline.remark = "",
                      this.create_by="admin"
                  console.info(res)
                  this.fill();
              })
              .catch((err) => {
                  alert("新增失败！")
                  console.info(this.formData);
                  console.info(err.response);
              });
      },
      MakeTime() {//时间
          let yy = new Date().getFullYear();
          let mm = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1);
          let dd = (new Date().getDate()) < 10 ? '0' + (new Date().getDate() + 1) : (new Date().getDate() + 1);
          let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
          let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
          let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
          this.formInline.create_time = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      }
  }
}
</script>
<style scoped>
/* 按钮主题颜色 */
.custom-button {
  border: #545C64;
  background-color: #545C64;
  /* 背景色 */
  color: white;
  /* 文本颜色 */
  transition: background-color 0.3s;
  /* 过渡时间可根据需要调整 */
  /* 其他样式属性 */
}

.custom-button:hover {
  border: #545C64;
  background-color: #79828a;
  /* 背景色 */
  color: white;
  /* 文本颜色 */
  /* 其他样式属性 */
}

.custom-button:focus {
  border: #545C64;
  background-color: #79828a;
  /* 背景色 */
  color: white;
  /* 文本颜色 */
  /* 其他样式属性 */
}

.custom-hr {
  border: none;
  border-top: dotted 1px;
  color: gray;
  background-color: gray;
  height: 1px;
}

.custom-button2 {
  background-color: #fff;
  color: #545C64;
  border: #545C64;
}

.custom-button2:hover {
  color: #fff;
  background-color: #79828a;
  border: #545C64;
}

.custom-button2:focus {
  color: #79828a;
  background-color: white;
}

.Selected {
  display: inline-block;
}

.SInput {
  width: 190px;
}

.demo-form-inline2 {
  margin-top: 50px;
  line-height: 40px;
}
</style>